<template>
  <div id="industryRankPage" @click="bodyClick">
    <HeadNav
      type="inquire"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="authorsrank"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg" style="padding: 10px 15px">
                <a-select
                  v-model="dateType"
                  style="width: 120px"
                  @change="handleChange"
                >
                  <a-select-option value="4">年榜单</a-select-option>
                  <a-select-option value="3">月榜单</a-select-option>
                  <a-select-option value="2">周榜单</a-select-option>
                  <a-select-option value="1">日榜单</a-select-option>
                </a-select>
                <span
                  style="
                    display: inline-block;
                    vertical-align: top;
                    margin-left: 5px;
                  "
                >
                  <!-- 日数据 -->
                  <a-date-picker
                    v-model="chooseDate"
                    format="YYYY-MM-DD"
                    @change="dateChange"
                    inputReadOnly
                    :disabledDate="disabledEndDate"
                    v-if="dateType == 1"
                  >
                    <span class="text-btn">{{ dateText }}</span>
                  </a-date-picker>
                  <!-- 周数据 -->
                  <a-week-picker
                    v-model="chooseDate"
                    @change="weekChange"
                    inputReadOnly
                    :disabledDate="disabledEndWeek"
                    v-if="dateType == 2"
                  >
                    <span class="text-btn">{{ dateText }}</span>
                  </a-week-picker>
                  <!-- 月数据 -->
                  <a-month-picker
                    v-model="chooseDate"
                    @change="monthChange"
                    inputReadOnly
                    :disabledDate="disabledEndWeek"
                    v-if="dateType == 3"
                  >
                    <span class="text-btn">{{ dateText }}</span>
                  </a-month-picker>
                  <!-- 年数据 -->
                  <a-date-picker
                    v-model="chooseDate"
                    mode="year"
                    format="YYYY"
                    @change="dateChange"
                    :open="showYear"
                    @panelChange="yearChange($event)"
                    inputReadOnly
                    v-if="dateType == 4"
                  >
                    <span class="text-btn" @click.stop="openPicker">{{
                      dateText
                    }}</span>
                  </a-date-picker>
                </span>
              </div>
            </div>
            <!-- 列表 -->
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 595px;
                  position: relative;
                  padding-bottom: 60px;
                "
              >
                <div class="section-title">
                  <span>作家排行榜</span>
                  <span class="desc">{{ dateText }}</span>
                </div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="55" />
                      <col width="300" />
                      <col width="100" />
                      <col width="100" />
                      <col width="100" />
                      <col width="400" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>作者</td>
                        <td>国家</td>
                        <td>生日</td>
                        <td>作品数</td>
                        <td style="text-align: right">当期销售指数</td>
                      </tr>
                    </thead>
                    <tbody v-if="authorList.length > 0">
                      <tr v-for="(item, index) in authorList" :key="index">
                        <td>{{ index + 1 + (pageSize * page - pageSize) }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.photo">
                              <img
                                :src="item.photo"
                                alt
                                style="width: 40px; height: 40px"
                              />
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.name"
                              @click="$toAuthor(item.author_id)"
                              >{{ item.name }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <span v-if="item.country">[{{ item.country }}]</span>
                          <span v-else>--</span>
                        </td>
                        <td>{{ item.birth_date ? item.birth_date : "--" }}</td>
                        <td>{{ item.goods_count }}个</td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_amount.toLocaleString()
                          }}</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="6" style="text-align: center">
                          <div style="margin-top: 100px">
                            <a-empty />
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  style="
                    text-align: right;
                    position: absolute;
                    bottom: 15px;
                    right: 15px;
                  "
                >
                  <a-pagination
                    :show-total="(total) => `共 ${trueTotal>2000?2000+'+':trueTotal} 条数据`"
                    :default-current="1"
                    :total="total"
                    v-model="page"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style lang="scss" scoped>
.text-btn {
  display: inline-block;
  font-size: $fontSize - 2;
  color: $fontColor1;
  padding: 0 15px;
  line-height: 30px;
  border: 1px solid $themeColor20;
  border-radius: 4px;
  cursor: pointer;
}
</style>
<script>
import { COMMON_CATEGORY } from "../../apis/common.js";
import {
  INDUSTRY_RANK_GOODS,
  INDUSTRY_RANK_CATE,
  INDUSTRY_RANK_AUTHOR,
} from "../../apis/industry.js";
export default {
  data() {
    return {
      pagePower: true,
      isLoading: true,
      chooseDate: null,
      dateType: "4",
      dateText: "",
      cycle: "",
      oneDay: "",
      showYear: false,
      authorList: [],
      trueTotal: 0,
      total: 0,
      page: 1,
      pageSize: 20,
    };
  },
  mounted() {
    this.chooseDate = this.$moment().format("YYYY");
    this.dateText = this.$moment().format("YYYY年");
    this.cycle = this.$moment().format("YYYY");
    this.oneDay = this.$moment().format("YYYYMMDD");
    this.getAuthorData();
  },
  methods: {
    // 作者
    async getAuthorData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.dateType,
        start_date: this.oneDay,
        period: this.cycle,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_RANK_AUTHOR(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.authorList = [];
        this.trueTotal = res.data.total_count;
        this.total = res.data.total_count > 2000 ?2000:res.data.total_count;
        this.authorList = res.data.result;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    onShowSizeChange(current, pageSize) {
      this.isLoading = true;
      this.page = current;
      this.getAuthorData();
    },
    // 时间榜单类型切换
    handleChange(value) {
      this.isLoading = true;
      if (value == 1) {
        this.chooseDate = this.$beforeDate();
        this.dateText = this.$moment(this.$beforeDate()).format(
          "YYYY年MM月DD日"
        );
        this.cycle = this.$moment(this.$beforeDate()).format("YYYYMMDD");
        this.oneDay = this.$moment(this.$beforeDate()).format("YYYYMMDD");
      } else if (value == 2) {
        this.chooseDate = this.$moment().format("YYYY-MM-DD");
        this.cycle = this.$getCurrenWeek(this.$moment().format("YYYY-MM-DD"));
        let _str = this.cycle,
          start = this.$moment().day(1).format("YYYY-MM-DD"),
          end = this.$moment().format("YYYY-MM-DD");
        this.dateText =
          _str.slice(0, 4) +
          "年第" +
          _str.slice(4, 6) +
          "周（" +
          start +
          "~" +
          end +
          "）";
        this.oneDay = this.$moment().format("YYYYMMDD");
      } else if (value == 3) {
        this.chooseDate = this.$moment().format("YYYY-MM-DD");
        this.dateText = this.$moment().format("YYYY年MM月");
        this.cycle = this.$moment().format("YYYYMM");
        this.oneDay = this.$moment().format("YYYYMMDD");
      } else if (value == 4) {
        this.chooseDate = this.$moment().format("YYYY");
        this.dateText = this.$moment().format("YYYY年");
        this.cycle = this.$moment().format("YYYY");
        this.oneDay = this.$moment().format("YYYYMMDD");
      }
      this.page = 1;
      this.getAuthorData();
    },
    // 日数据选择
    dateChange(date, dateString) {
      this.isLoading = true;
      const startDate = dateString;
      this.chooseDate = startDate;
      this.dateText = this.$moment(startDate).format("YYYY年MM月DD日");
      this.cycle = startDate.replace(/-/g, "");
      this.oneDay = startDate.replace(/-/g, "");
      this.page = 1;
      this.getAuthorData();
    },
    // 周数据选择
    weekChange(date, dateString) {
      this.isLoading = true;
      // var _day = date._d.getDate();
      const startDate = date.day(1).format("YYYY-MM-DD"); // 周一日期
      const endDate = date.day(7).format("YYYY-MM-DD"); // 周日日期
      let _weekth = date.week();
      if (_weekth < 10) {
        _weekth = "0" + _weekth;
      }
      this.chooseDate = startDate;
      let diffs = this.$moment(endDate).diff(this.$moment(), "days");
      if (diffs > 0) {
        this.dateText =
          dateString.split("-")[0] +
          "第" +
          _weekth +
          "周（" +
          startDate +
          "~" +
          this.$moment().format("YYYY-MM-DD") +
          "）";
      } else {
        this.dateText =
          dateString.split("-")[0] +
          "第" +
          _weekth +
          "周（" +
          startDate +
          "~" +
          endDate +
          "）";
      }
      this.cycle = dateString.split("-")[0] + _weekth;
      this.oneDay = startDate.replace(/-/g, "");
      this.page = 1;
      this.getAuthorData();
    },
    // 月数据选择
    monthChange(date, dateString) {
      this.isLoading = true;
      const startDate = date
        .month(date.month())
        .startOf("month")
        .format("YYYY-MM-DD");
      let _month = date.month() + 1;
      if (_month < 10) {
        _month = "0" + _month;
      }
      this.chooseDate = startDate;
      this.dateText = dateString.split("-")[0] + "年" + _month + "月";
      this.cycle = dateString.split("-")[0] + _month;
      this.oneDay = startDate.replace(/-/g, "");
      this.page = 1;
      this.getAuthorData();
    },
    // 年数据选择
    yearChange(e) {
      this.isLoading = true;
      if (e._d.getFullYear().toString() >= this.$moment().format("YYYY")) {
        this.chooseDate = this.$moment().format("YYYY");
      } else {
        this.chooseDate = e._d.getFullYear().toString();
      }
      this.cycle = this.chooseDate;
      this.oneDay = this.$moment(this.chooseDate).format("YYYYMMDD");
      this.dateText = this.$moment(this.chooseDate).format("YYYY年");
      this.showYear = false;
      this.page = 1;
      this.getAuthorData();
    },
    bodyClick() {
      this.showYear = false;
    },
    openPicker() {
      this.showYear = true;
    },
    // 不可选择时间
    disabledEndDate(endValue) {
      const startValue = this.$moment().subtract(1, "days");
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() < endValue.valueOf();
    },
    disabledEndWeek(endValue) {
      const startValue = this.$moment();
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() <= endValue.valueOf();
    },
    publisherChange() {
      this.isLoading = true;
      this.dateType = "4";
      this.showYear = false;
      this.page = 1;
      this.chooseDate = this.$moment().format("YYYY");
      this.dateText = this.$moment().format("YYYY年");
      this.cycle = this.$moment().format("YYYY");
      this.oneDay = this.$moment().format("YYYYMMDD");
      this.getAuthorData();
    },
  },
};
</script>